<template>
    <div>
        <el-row class="rows">
            <el-col :span="3" class="cols">
                <span>轮播图</span>
            </el-col>
            <el-col :span="3" style="margin-top: -5px;">
                <el-upload action="http://localhost:8080/file/upload" list-type="picture" ref="upload" :limit="1" :auto-upload="true" :on-exceed="handle" :on-success="getfile">
                    <template #trigger>
                        <el-button type="primary">上传图片</el-button>
                    </template>
                    <template #file="{ file }">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    </template>
                </el-upload>
            </el-col>
        </el-row>
        <el-row class="rows">
            <el-col :span="3" class="cols">
                <span>是否上架</span>
            </el-col>
            <el-col :span="3" style="margin-top: -5px;">
                <el-switch v-model="judge" />
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3" :offset="18">
                <el-button @click="quxiao">
                    取消
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="save">
                    保存
                </el-button>
            </el-col>
        </el-row>

    </div>
</template>

<script  setup>
    import { genFileId } from "element-plus";
    import { ref, defineEmits } from "vue";

    let judge = ref(true);

    const upload = ref();
    const handle = function (files) {
        upload.value.clearFiles();
        const file = files[0];
        file.uid = genFileId();
        upload.value.handleStart(file);
        upload.value.submit();
    };

    let photo = ref("");
    const getfile = function (response) {
        photo.value = "/static/" + response;
        console.log(photo.value);
    };

    const emites = defineEmits(["tuichu"]);

    const quxiao = function () {
        emites("tuichu");
    };

    const save = function () {
        emites("tuichu", {
            lPhoto: photo.value,
            lDel: judge.value ? 1 : 0
        });
    };
</script>

<style lang="less" scoped>
    .rows {
        margin: 30px 0;
        span {
            font-weight: bold;
            position: relative;
            left: -10px;
            top: 0;
        }
    }

    .weizhi {
        display: flex;
        justify-content: start;
        align-items: center;
        position: relative;
        left: 7px;
    }
</style>